<template>
  <view class="">
    <!-- 自定义导航栏 -->
    <gh-navbar id="navbar" :showback="true" title="问题咨询" />
    <div class="container">
      <view class="tip">
        <view class="tip-text">咨询已发送给律师。律师利用工作之余解答，目前仅解答 一次。请耐心等待。</view>
        <view class="tip-text">问题紧急使用下方服务，您将享受律师快速回复、高质量解 答等服务。</view>
      </view>
      <div class="content-box">
        <div class="content-text">
          <div class="content-title">
            <text class="label">在线咨询:</text>
            <text class="price">
              <text class="money">￥{{money}}</text>/{{time}}
            </text>
          </div>
          <div class="content-tip">
            <div>即时沟通，平时五分钟回复</div>
            <div>案情分析，获得针对性解答</div>
            <div>问题解答率高达99%</div>
          </div>
        </div>
        <button class="submit" @click="handleSubmit">立即付费使用</button>
      </div>
    </div>
  </view>
</template>
<script>
export default {
  data() {
    return {
      money: 20,
      id: 0,
      time: ''
    }
  },
  async onLoad(e){
    this.id = e.id
    this.type = e.type
    const res = await this.$gh.request('member.index',{
      data:{
        op: 'getSysOnline',
        sys_type: e.type
      }
    })
    const {charge, duration, time_unit} = res.data.list
    this.money = charge
    const unit = time_unit == 'minute' ? '分钟' : '天'
    this.time = duration + unit
    
  },
  onUnload(){
    // 页面关闭，相当于返回，强制返回首页
    uni.switchTab({
       url: '/pages/index/index'
    });
  },
  methods: {
    handleSubmit(){
      let that = this
      uni.navigateTo({
         url: `/pageIndex/menu/order?id=${that.id}&type=1`
      });
    }
  },
};
</script>
<style lang='less' scoped>
@import url("../../common/util.less");
.container {
  padding: 25rpx;
  .tip {
    .tip-text {
      font-size: 24rpx;
      color: @font-color;
      text-indent: 48rpx;
      margin-bottom: 25rpx;
    }
  }
  .content-box {
    padding: 0rpx 20rpx 40rpx;
    background-color: #fff;
    border-radius: 20rpx;
    border: 0.5rpx solid rgba(240, 240, 240, 0.5);
    margin-top: 13rpx;
    .content-text {
      .content-title {
        color: #6c76a7;
        margin: 40rpx 0 33rpx;
        .label {
          font-size: 30rpx;
        }
        .price{
          font-size: 26rpx;
          margin-left: 10rpx;
        }
        .money{
          color: red;
        }
      }
      .content-tip {
        font-size: 26rpx;
        color: @font-color;
      }
    }
    .submit {
      .gh-center();
      width: 620rpx;
      height: 80rpx;
      margin: 65rpx auto;
      background-color: #849aff;
      border-radius: 40rpx;
      color: #fff;
      font-size: 36rpx;
      border: none;
    }
  }
}
</style>